var q = {
    pagenum: 1,
    pagesize: 2,
    cate_id: '',
    state: ''
}

var total = 0
function load() {

    artListAPI(q, function (res) {
        if (res.data.data.length == 0) {
            q.pagenum = q.pagenum - 1
            load()
            return
        }
        total = res.data.total
        $(".layui-table tbody").empty();
        res.data.data.forEach(function (obj) {
            var thetr = `<tr>
            <td>${obj.title}</td>
            <td>${obj.cate_name}</td>
            <td>${formatDate(obj.pub_date)}</td>
            <td>${obj.state}</td>
            <td><a href="/iframe/article/publisher/publisher.html?id=${obj.Id}" class="layui-btn layui-btn-xs">编辑</a>
            <button myid="${obj.Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger del">删除</button></td>
        </tr>`
            $(".layui-table tbody").append(thetr);
        });
        setPage();
    })
}
load();


//美化日期
function formatDate(dateStr) { // data数据, date时间
    var theDate = new Date(dateStr);
    // 按照我们想要的格式, 年-月-日 时:分:秒
    var year = theDate.getFullYear();
    var month = theDate.getMonth() + 1;
    var day = theDate.getDate();
    var hours = theDate.getHours();
    var minutes = theDate.getMinutes();
    var seconds = theDate.getSeconds();

    var fn = val => val < 10 ? '0' + val : val;
    return [year, month, day].map(fn).join("-") + " " + [hours, minutes, seconds].map(fn).join(":");
}


function setPage() {
    var laypage = layui.laypage;
    //执行一个laypage实例
    laypage.render({
        elem: 'page', //注意，这里的 page 是 ID，不用加 # 号
        count: total, //数据总数，从服务端得到
        limit: q.pagesize, // 每页显示几条
        curr: q.pagenum, // 当前第几页高亮
        limits: [2, 5, 10, 20, 30],
        // (1): 只要laypage.render()被调用,  默认第一个得点击下, 所以jump就被触发了
        // (2): 方式2触发jump, 就是用户点击了页码, 直接触发jump函数执行
        // 防止死循环: first的值为true, 证明是方式1触发的, 那我们就不能去load() -> setPage -> laypage.render()了
        jump: function (obj, first) {
            if (!first) {
                q.pagenum = obj.curr; // 用户点击的第几页
                q.pagesize = obj.limit; // 点击的一页要多少条
                q.pagesize = obj.limit;//分页器选择了一页多少条，同步给全局的参数对象，为了一会调load
                load();
            }
        },
        // 自定义分页器 - 增加额外的东西
        layout: ["count", "prev", "limit", "page", "next", "skip"],
        // 下拉菜单里显示的数据

    });
}



cateListAPI({}, function (res) {
    var arr = res.data.data;
    $("select[name=category]").append(`<option value="">所有分类</option>`)
    arr.forEach(function (obj) {
        var option = `<option value="${obj.Id}">${obj.name}</option>`;
        $('select[name=category]').append(option);
        layui.use('form', function () {
            var form = layui.form;
            form.render()
        })
    });
})



$('.search').on('submit', function (ev) {
    ev.preventDefault();
    var cateId = $('[name=category]').val();
    var state = $('select[name=state]').val();
    q.cate_id = cateId;
    q.state = state;
    load()
})



$('.layui-table tbody').on('click', '.del', function () {
    var theId = $(this).attr('myid');
    delArgAPI(theId, function (res) {
        console.log(res);
        load();
    })
})

